// JavaScript Document

// fade
$("img").css("visibility", "hidden").imagesLoaded({
	progress: function(isBroken, $images, $proper, $broken) {
		var $this = $(this).css("visibility", "");
		if($.support.opacity) $this.css("opacity", 0).animate({"opacity": 1}, function() { $this.css({"opacity": ""}); if(!$this.attr("style")) $this.removeAttr("style"); });
	}
});

// inputs
$("select, input, a.button, button").uniform();
$("label").inFieldLabels();

// top menu
$("#top_menu > li").on({
	mouseenter: function() {
		if(!$("#doc:focus").length) $(this).children("div.dropdown").stop().hide().slideDown();
	},
	mouseleave: function() {
		if(!$("#doc:focus").length) $(this).children("div.dropdown").stop().attr("style", "");
	}
});

// init
$("#nav").css("visibility", "hidden");
$(window).on({
	load: function() {
		var $nav = $("#nav").css("visibility", "");
		if($.support.opacity) $nav.css("opacity", 0).animate({"opacity": 1}, function() { $nav.css({"opacity": ""}); if(!$nav.attr("style")) $nav.removeAttr("style"); });
		$("#main").css("background-image", "none");
	}
});

// contenido
(function() {
	var $nav = $("#nav"),
		$buttons = $("a[data-section]"),
		$tabs = $("a[data-pane]"),
		$background = $("#background"),
		$section = $("#section"),
		$all = $section.find("*"),
		isBtnVideoSAT = false,
		timer = null,
		options = { // opciones para abrir las pantallas segun el valor que especifique el atributo [data-options]
			init: {mClass: "mid", el: ".init", bgPos: -1000, show: "img.person", hide: "a.sub, a.sub2"},
			sunat: {mClass: "left", el: ".sunat", bgPos: 0, show: "a.sub", hide: "a.sub2, img.person"},
			sat: {mClass:"right", el: ".sat", bgPos: -2095, show: "a.sub2", hide: "a.sub, img.person"}
		};
	// navegacion
	$buttons.on("click", function() {
		var $this = $(this),
			object = options[$this.data("section")];
		if($this.hasClass("active")) {
			$section.find("div.pane, #screen").stop(true).animate({top: -400}, 200, "easeInBack", function() {
				if(!$.support.opacity) $section.find("div.intro").show().siblings().add("#screen").hide();
				else $section.find("div.intro").stop(true, true).fadeIn().siblings().add("#screen").hide();
				$tabs.removeClass("active");
			});
			return;
		}
		$buttons.removeClass("active").filter($this).addClass("active");
		$nav.stop(true).animate({bottom: -460}, 400, "easeInBack", function() { show(object); });
		//$background.stop(true).animate({left: object["leftPos"]}, 1000);
	});
	// tabs
	$tabs.on("click", function() {
		var $current, $this = $(this);
		if($this.hasClass("active")) return;
		$tabs.removeClass("active").filter($this).addClass("active");
		$current = $section.find("div.pane").filter(":visible");
		if(!$current.length) $current = $("#screen:visible");
		if($current.length) $current.stop(true).animate({top: -400}, 200, "easeInBack", function() { showPane($this.data("pane")); });
		else showPane($this.data("pane"));
	});
	// ver video
	$("a[data-src]").on("click", function() {
		var src = $(this).data("src");
		if($(this).attr("id") === "btn-video-sat") {
			isBtnVideoSAT = true;
			$("#screen").show().stop(true).animate({top: 0}, 200, "easeOutBack", function() { $("#mask").show(); $(this).children("iframe").attr("src", src) });
			return;
		}
		var $current = $(this).parents("div.pane");
		$current.stop(true).animate({top: -400}, 200, "easeInBack", function() {
			$("div.pane").hide();
			$("#screen").show().stop(true).animate({top: 0}, 200, "easeOutBack", function() { $("#mask").show(); $(this).children("iframe").attr("src", src) });
		});
	});
	$("a.close").on("click", function() {
		if(isBtnVideoSAT) {
			isBtnVideoSAT = false;
			$("#mask").hide();
			$("#screen").hide().children("iframe").attr("src", "");			
		}
		$tabs.filter(".active").removeClass("active").trigger("click");
	});
	// ver mas
	$("a.up, a.down").on("click", moveVertical);
	
	// funciones
	function show(opt) { // abre la pantalla segun las opciones del objeto 'opt'
		clearTimeout(timer);
		$("#screen").children("iframe").attr("src", "");
		$all.removeAttr("style").filter($tabs).removeClass("active");
		
		if(!$.support.opacity) $section.children("div").hide().filter(opt["el"]).show();
		else $section.children("div").hide().filter(opt["el"]).stop(true).fadeIn();
		$background.stop(true).animate({top: 0, left: opt["bgPos"]}, 800);
		$("#main").attr("class", opt["mClass"]);
		$nav.stop(true).animate({bottom: -60}, 400, "easeOutBack").find(opt["show"]).show().end().find(opt["hide"]).hide();
	}
	
	function showPane(sel) { // muestra el pane que coincide con el string 'sel'
		$("#mask").hide();
		$("#screen").hide().children("iframe").attr("src", "");
		$section.find(sel).show().stop(true).animate({top: 30}, 200, "easeOutBack").siblings().hide();
	}
	
	function moveVertical() { // mueve el escenario en la direccion string 'dir' especificada
		var dir = $(this).attr("class"),
			bgTop = (dir == "up") ? 240 : 0,
			navBottom = (dir == "up") ? -460 : -60;
		$("div.intro").children("div").toggle();
		if(dir == "up") $("#plane, #blimp").css("left", "");
		$background.stop(true).animate({top: bgTop}, 800, function() {
			if(dir == "up") {
				$("#plane").stop(true).animate({left: 480}, 4000);
				$("#blimp").stop(true).animate({left: 2150}, 4000);
			}
		});
		$nav.stop(true).animate({bottom: navBottom}, 800);
		clearTimeout(timer);
		$background.css("background-position", "");
		if(dir == "up") fly(0);
	}
	
	function fly(val) { // mueve el escenario horizontalmente
		var vel = ($("#main").hasClass("left")) ? 5 : -5;
		val++;
		if($.support.opacity) $("#plane").css("top", "+=" + (Math.sin(val)));
		$background.css("background-position", (val * vel) + "px 38px");
		timer = setTimeout(function() { fly(val); }, 33);
	}
})();